"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2018/1/15
 */
import * as React from 'react'
import {commentStyles} from "../../assets/styles/guide";
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
import {ConfirmSupportReportPage} from "../../interface/router";
import {toastValidateError} from "../../utils/tools";

const {View, Keyboard, TextInput, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");

class Page extends React.Component<ConfirmSupportReportPage, any> {

    _input: any;

    onSubmit = () => {
        Keyboard.dismiss();
        if (!this._input._lastNativeText || typeof this._input._lastNativeText === 'undefined') {
            toastValidateError(null, '请确认您的办公室号码');
            return;
        }
        let payload = {...this.props.payload};
        payload['workNumber'] = this._input._lastNativeText;
        this.props.dispatch({
            type: 'place/reportQuestion', payload: {
                ...payload,
                from: 'confirmReport'
            }
        });

    };

    render() {
        return (
            <View style={[commonStyles.container, commonStyles.relative]}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton icon={{name: 'icon-cha1', color: '#fff', size: 20}}/>}
                               title={{title: "请确认您的办公室号码", tintColor: '#fff'}}
                />

                <View style={[{padding: 8}]}>
                    <TextInput style={{
                        height: autoSize(40),
                        borderColor: Colors.Border,
                        borderWidth: 0.5,
                        paddingHorizontal: 4,
                        borderRadius: 5
                    }} placeholder='输入办公室号码'
                               autoFocus
                               ref={text => this._input = text}
                               onSubmitEditing={this.onSubmit}/>
                </View>
                <View style={[{padding: 8, marginTop: 10}]}>
                    <TouchableOpacity onPress={this.onSubmit}
                                      style={[commonStyles.flex1, commonStyles.centerVH, commonStyles.button]}>
                        <MyText color={Colors.White}>确认</MyText>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

export default connect(
    ({auth, place}) => ({auth, place})
)(Page);
